<template>
  <div class="musicList">
    <div class="musicList-top">
      <div class="left">
        <el-button round size="small" class="btn-left" @click.stop="chooseCat"
          >{{ btnName }}<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
        <div class="all-tags" v-show="tagsVisible">
          <div class="all-tags-top">
            <el-button round size="small" class="btn-left">全部歌单</el-button>
          </div>
          <div class="all-tags-bottom">
              <div class="cat-item-left"></div>
          </div>
        </div>
      </div>
      <div class="right">
        <select-category
          :replaceFields="replaceFields"
          :categories="hotTags"
          mode="horizontal"
          @change="changeCat"
        ></select-category>
      </div>
    </div>
    <div class="musicList-cantainer">
      <music-list :musicList="playList"></music-list>
    </div>
  </div>
</template>
<script>
import selectCategory from "components/common/select-category/select-category";
import MusicList from "components/content/musiclist/Musiclist";
import {
  _getMusicListHot,
  _getPlayList,
  _getCatList,
} from "network/music-list";
export default {
  name: "allMusicList",
  components: {
    selectCategory,
    MusicList,
  },
  data() {
    return {
      btnName: "华语",
      hotTags: [],
      replaceFields: {
        value: "id",
        content: "name",
      },
      limit: 50,
      offset: 1,
      cat: "全部",
      playList: [],
      cat_top: 0,
      cat_left: 0,
      tagsVisible: false,
      categories: [],
      list: [], //存放所有分类选项的列表,内部是categories所有分类的子数组
      /**@ ArrayItems
       *0：langs:[],//语种
       *1：styles:[],//风格
       *2：scenes:[],//场景
       *3：emotions:[],//情感
       *4：themes:[],//主题
       */
    };
  },
  mounted() {
    this.getHotTags();
    this.getPlayList();
    this.getCatList()
  },
  watch: {
      tagsVisible(val) {
         if (val) {
             document.body.addEventListener('click', this.closeCats)
         } else {
             document.body.removeEventListener('click',this.closeCats)
         }
      }
  },
  methods: {
    getCatList() {
      _getCatList().then((res) => {
          if (res.status === 200) {
              const data = res.data
              this.categories = Object.values(data.categories)
            //   this.list = new Array(this.categories.length)
              for(let i=0;i<this.categories.length; i++) {
                  this.list[i] = []
              }
              data.sub.map(item => {
                  switch(item.category) {
                      case 0 : this.list[0].push(item);break;
                      case 1 : this.list[1].push(item);break;
                      case 2 : this.list[2].push(item);break;
                      case 3 : this.list[3].push(item);break;
                      case 4 : this.list[4].push(item);break;
                  }
              })
              console.log(this.list);
          }
      });
    },
    getHotTags() {
      _getMusicListHot().then((res) => {
        if (res.status === 200) {
          const data = res.data.tags;
          this.hotTags = data;
        }
      });
    },
    getPlayList() {
      _getPlayList(this.cat, this.limit, this.offset).then((res) => {
        this.playList = [];
        if (res.status === 200) {
          res.data.playlists.map((item) => {
            let tempData = {
              picUrl: item.coverImgUrl,
              ...item,
            };
            this.playList.push(tempData);
          });
        }
      });
    },
    changeCat(value, data) {
      this.cat = data.content;
      this.btnName = data.content;
      this.getPlayList();
    },
    chooseCat(e) {
      console.log(e);
      this.tagsVisible = true;
    },
    closeCats() {
        this.tagsVisible = false
    }
  },
};
</script>
<style lang="less" scoped>
.musicList {
  padding: 2% 10% 0 10%;
  height: 100%;
  width: 100%;
  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.btn-left {
  width: 100px;
}
.musicList-cantainer {
  padding-top: 2%;
}
.left {
  position: relative;
}
.all-tags {
  width: 744px;
  height: 744px;
  position: absolute;
  top: 35px;
  left: 0px;
  background: rgb(255, 255, 255);
  z-index: 10;
  border-radius: 10px;
  box-shadow: -1px -1px 4px rgb(175, 170, 170);
  //   padding: 20px;
}
.all-tags-top {
  height: 55px;
  padding: 10px 20px;
  border-bottom: 1px solid rgb(219, 215, 215);
}
</style>